<template lang="pug">
  li
    a.link-style(@click="toLink") {{currentFlowDefine}}
      //- b(:class="{colorRed: !isNotify, colorGreen: isNotify}") ({{isNotify | filterNotify}})
      //- b(:class="{colorRed: !isBalance, colorGreen: isBalance}") ({{isBalance | filterBalance}})
      p 截止时间： {{currentDeadline}}
      slot
</template>
<script>
export default {
  name: 'TaskItem',
  props: {
    id: Number,
    flowDefineId: Number,
    dueDayLimit: Number,
    deadline: Number,
    title: String,
    relation: {
      type: Object,
      default: () => { return {} }
    }
  },
  computed: {
    isTimeout () {
      return this.remainingTime < 0
    }
  },
  data () {
    return {
      currentFlowDefine: this.title,
      currentDeadline: this.$moment(this.deadline).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  methods: {
    toLink () {
      window.location.href = `/system/#/taskDetail?flow=${this.id}`
      setTimeout(() => {
        window.location.reload()
      }, 300)
    }
  }
}
</script>
<style scoped lang="sass">
li
  padding: 20px 0
  border-bottom: 1px solid #e8e8e8
  &:nth-last-of-type(1)
    border-bottom: 0px
  a
    display: block
    font-size: 14px
    color: #999 !important
    text-decoration: none
  b
    font-size: 12px
    margin-left: 5px
  p
    margin-top: 10px
.colorRed
  color: #fe6553
.colorGreen
  color: rgb(88, 214, 141)
.link-style
  cursor: pointer
</style>
